<template>
  <div class="layout-pd">
    <div class="container ">
      <div class="search-btns flex items-center justify-between">
        <div class="btns"></div>
        <div class="search flex-1 mx-4 flex_cen relate">
          <div class="icon-name" @click="showStatusFn">
            <el-icon>
              <SuccessFilled />
            </el-icon>
            <div class="ml10">选择状态</div>
          </div>
          <div v-if="showStatus" class="satus-class">
            <div class="title1" @click="title1Fn">询价订单(全选/清空)</div>
            <div class="checkbox1">
              <el-checkbox-group v-model="title1Val" @change="changeBox1">
                <el-checkbox v-for="item in title1ValArr" :key="item.id" :label="item.id" :value="item.id">
                  <span>{{ item.label }}</span>
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="title2" @click="title2Fn">成交订单(全选/清空)</div>
            <div class="checkbox2">
              <el-checkbox-group v-model="title2Val" @change="changeBox2">
                <el-checkbox v-for="item in title2ValArr" :key="item.id" :label="item.id" :value="item.id">
                  <span>{{ item.label }}</span>
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="flex_cen_end">
              <el-button type="primary" @click="submitSelect">确认选择</el-button>
            </div>
          </div>
          <el-input v-model="state.formData.title" placeholder="订单号" class="input-with-select">
            <template #append>
              <el-button :icon="Search" @click="getData" />
            </template>
          </el-input>
        </div>
        <div class="batch_export">
          <el-input v-model="state.formData.username" placeholder="客户姓名" class="input-with-select">
            <template #append>
              <el-button :icon="Search" @click="getData" />
            </template>
          </el-input>
        </div>
        <div class="batch_export">
          <el-input v-model="state.formData.phone" placeholder="手机号" class="input-with-select">
            <template #append>
              <el-button :icon="Search" @click="getData" />
            </template>
          </el-input>
        </div>
        <div class="batch_export">
          <el-input v-model="state.formData.email" placeholder="邮箱" class="input-with-select">
            <template #append>
              <el-button :icon="Search" @click="getData" />
            </template>
          </el-input>
        </div>
        <div class="batch_export">
          <el-date-picker v-model="state.formData.dateRange" type="datetimerange" start-placeholder="开始时间"
            end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" @change="handleDateChange" />
        </div>
        <div class="batch_export">
          <el-button type="primary" @click="batchExport" v-if="auth(state.exportAuth)">批量导出</el-button>
        </div>
      </div>
      <div class="table-class">
        <div class="tables">
          <table class="order-table header-table">
            <thead>
              <tr>
                <th class="wid140">
                  <div class="flex">
                    <div>订单编号</div>
                    <div class="icons">
                      <el-icon @click="iconClick('order_no', 'asc1')">
                        <CaretTop :color="sortType === 'asc1' ? '#FF8800' : '#DDDDDD'" />
                      </el-icon>
                      <el-icon @click="iconClick('order_no', 'desc1')">
                        <CaretBottom :color="sortType === 'desc1' ? '#FF8800' : '#DDDDDD'" />
                      </el-icon>
                    </div>
                  </div>
                </th>
                <th class="wid80">文件数</th>
                <th class="wid80">客户属性</th>
                <th class="wid140">收件人信息</th>
                <th class="wid140">
                  <div class="flex">
                    <div>总价（总计）</div>
                    <div class="icons">
                      <el-icon @click="iconClick('total_price', 'asc2')">
                        <CaretTop :color="sortType === 'asc2' ? '#FF8800' : '#DDDDDD'" />
                      </el-icon>
                      <el-icon @click="iconClick('total_price', 'desc2')">
                        <CaretBottom :color="sortType === 'desc2' ? '#FF8800' : '#DDDDDD'" />
                      </el-icon>
                    </div>
                  </div>
                </th>
                <th class="wid140">运费金额（收款）</th>
                <th class="wid100">订单备注</th>
                <th class="wid100">销售备注</th>
                <th class="wid100">订单状态</th>
                <th class="wid100">支付渠道</th>
                <th class="wid100">支付时间</th>
                <th class="wid100">客户经理</th>
                <th class="wid100">操作</th>
              </tr>
            </thead>
          </table>
          <div class="body-wrapper">
            <table v-if="state.tableData.length" class="order-table body-table">
              <tbody>
                <template v-for="(item, index) in state.tableData" :key="index">
                  <tr>
                    <td class="wid140">
                      <div class="pre-break">{{ item.order_no }}</div>
                      <div class="pre-break mt5">
                        <el-icon @click="showInfos(item)">
                          <CaretBottom v-if="item.isShow" />
                          <CaretRight v-else />
                        </el-icon>
                      </div>
                    </td>
                    <td class="wid80">
                      <div class="flex_cen_cen">
                        <div class="bgnum">{{ item && item.items && item.items.length }}</div>
                      </div>
                    </td>
                    <td class="wid80">
                      <div class="bgnum">{{ ratingMap[item.rating] }}</div>
                      <div>{{ item.client_property }}</div>
                      <div>下单客户名称：{{ item.username }}</div>
                      <el-tooltip :content="item.lead_id" placement="top" :open-delay="300">
                        <div class="orderidcilick" @click="orderIdClick(item)">
                          {{ item.lead_id }}
                        </div>
                      </el-tooltip>
                    </td>
                    <td class="wid140">
                      <div>收件人姓名: {{ item && item.addresses && item.addresses.recipient_name }}</div>
                      <div>手机号: {{ item && item.addresses && item.addresses.recipient_mobile }}</div>
                      <div>详细地址: {{ item && item.addresses && item.addresses.detailed_address }}</div>
                    </td>
                    <td class="wid140">{{ item.total_price }}</td>
                    <td class="wid140">{{ item.shipping_fee }}</td>
                    <td class="wid100">{{ item.remarks }}</td>
                    <td class="wid100">{{ item.follower_desc }}</td>
                    <td class="wid100">
                      <div v-if="item.order_status" class="flex_cen_cen">
                        <div class="bgnum">{{ payStatusObj[item.order_status] }}</div>
                      </div>
                    </td>
                    <td class="wid100">
                      <div v-if="item.order_status" class="flex_cen_cen">
                        <div class="bgnum">{{ payTypeObj[item.pay_type] }}</div>
                      </div>
                    </td>
                    <td class="wid100">{{ item.pay_time }}</td>
                    <td class="wid100">{{ item.follower }}</td>
                    <td class="wid100">
                      <el-button type="primary" v-if="auth(state.isHasEdit)" size="mini"
                        @click="clickGoEdit({ type: 'order', data: item })">编辑</el-button>
                    </td>
                  </tr>
                  <template v-if="item.isShow">
                    <tr class="borders">
                      <td colspan="13">
                        <div class="more_box" v-for="(itom, indox) in item.items" :key="indox">
                          <!-- 模型图 -->
                          <img class="product-img" :src="itom.model_img" alt="模型图" />
                          <!-- 图片 + 基础信息 -->
                          <div class="section-left">
                            <div class="basic-info">
                              <div class="product-name">
                                <label>{{ itom.pname }}</label>
                                <label class="indox">#{{ indox + 1 }}</label>
                                <el-icon class="download-icon cursors" @click="downLoadFile(itom, indox)">
                                  <UploadFilled />
                                </el-icon>
                              </div>
                            </div>
                            <div class="specs">
                              <div>volume: {{ parseSpec(itom.specifications)?.volume }}</div>
                              <div>vertices: {{ parseSpec(itom.specifications)?.vertices }}</div>
                              <div>surface: {{ parseSpec(itom.specifications)?.surface }}</div>
                            </div>
                          </div>

                          <!-- 服务与价格 -->
                          <div class="section-center">
                            <div class="service-item">
                              <label>生产工艺：</label>
                              <span>{{ itom.service_name }}</span>
                            </div>
                            <div class="service-item">
                              <label>单价：</label>
                              <span>{{ itom.price }}</span>
                            </div>
                          </div>

                          <!-- 右侧：详情信息（分组） -->
                          <div class="section-right">
                            <!-- 材料与后处理 -->
                            <div class="detail-group">
                              <div><label>材料：</label> {{ itom.material_name }}</div>
                              <div><label>后处理：</label> {{ itom.tags }}</div>
                              <div><label>数量：</label> {{ itom.pcount }}</div>
                            </div>

                            <!-- 客户经理备注： -->
                            <div class="detail-group">
                              <div><label>客户经理备注：</label> {{ itom.customer_remarks }}</div>
                            </div>

                            <!-- 文件 -->
                            <div class="detail-group">
                              <div><label>客户备注：</label> {{ itom.content }}</div>
                              <div>
                                <label>客户文件备注：</label>
                                <div v-for="(file, index) in itom.files" :key="index" class="file-item">
                                  <a :href="file.path" download>{{ file.name }}</a>
                                </div>
                              </div>
                            </div>

                            <!-- 备注与交期 -->
                            <div class="detail-group">
                              <div><label>生产交期：</label> {{ itom.production_lead_time }}</div>
                              <div><label>承诺交期：</label> {{ itom.delivery_times }}</div>
                            </div>
                          </div>

                          <div class="section-cb">
                            <!-- 成本 -->
                            <div class="detail-group">
                              <div><label>生产成本：</label> {{ itom.production_cost }}</div>
                              <div><label>物流成本：</label> {{ itom.logistics_cost }}</div>
                            </div>

                            <!-- 物流信息 -->
                            <div class="detail-group logistics-group">
                              <div><label>供应链物流单号：</label> {{ itom.supply_chain_number }}</div>
                              <el-image v-if="itom.supply_chain_img" :src="itom.supply_chain_img"
                                :preview-src-list="[itom.supply_chain_img]" fit="cover" class="logistics-img" />
                            </div>

                            <div class="detail-group logistics-group">
                              <div><label>我方发货单号：</label> {{ itom.our_side_logistics_number }}</div>
                              <el-image v-if="itom.our_side_img" :src="itom.our_side_img"
                                :preview-src-list="[itom.our_side_img]" fit="cover" class="logistics-img" />
                              <div><label>我方发货物流公司：</label> {{ itom.logistics_company_name }}</div>
                            </div>

                            <!-- 生产方 -->
                            <div class="detail-group">
                              <div><label>生产方名称：</label> {{ itom.production_party_name }}</div>
                            </div>
                          </div>

                          <!-- 操作区 -->
                          <div class="action-section" v-if="auth(state.isHasEdit1)">
                            <el-button type="primary" size="mini" @click="clickGoEdit({ type: 'item', data: itom })">
                              编辑
                            </el-button>
                          </div>
                        </div>
                      </td>
                    </tr>
                  </template>
                </template>
              </tbody>
            </table>
            <div v-else class="no-data">暂无数据</div>
          </div>
        </div>
        <div class="pagination">
          <el-pagination v-model:current-page="state.pageSizeObj.curPage" v-model:page-size="state.pageSizeObj.pageSize"
            :page-sizes="[5, 10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper"
            :total="state.pageSizeObj.total" @size-change="handleSizeChange" @current-change="handleCurChange" />
        </div>
      </div>
    </div>
    <AddDialog ref="addDialogRef" @updateList="getData" @updateItem="handleUpdateItem"></AddDialog>
  </div>
</template>

<script setup name="reconciliationIndex">
import { CaretRight, CaretBottom, CaretTop, UploadFilled, SuccessFilled, Search } from '@element-plus/icons-vue'
import { orderIndex } from '/@/api/startfab/index';
import { auth } from '/@/utils/authFunction';
import { reactive, ref, onMounted, defineAsyncComponent } from 'vue';
import axios from 'axios';
import { Local, Session } from '/@/utils/storage';
const AddDialog = defineAsyncComponent(() => import('./addFinancial.vue'));
const addDialogRef = ref()
const state = reactive({
  isHasEdit: 'admin:admin:reconciliationEdit',
  isHasEdit1: 'admin:admin:reconciliationEdit1',
  exportAuth: 'admin:admin:reconciliationExport',
  formData: {
    title: '',
    username: '',
    phone: '',
    email: '',
    dateRange: []
  },
  pageSizeObj: {
    curPage: 1,
    pageSize: 10,
    total: 0
  },
  columnData: [],
  tableData: []
})
const title1Boo2 = ref(false);
const showStatus = ref(false)
const title1Val = ref([])
const title2Val = ref([])
const title1ValArr = ref([
  { id: 0, label: '文件上传完成&配置已完成' },
  { id: 1, label: '地址已完善' },
  { id: 2, label: '下单成功，等待付款（待付款）' },
  { id: 4, label: '审核不通过' },
  { id: 8, label: '订单取消' },
])
const title2ValArr = ref([
  { id: 3, label: '付款已确认/内部审核中' },
  { id: 4, label: '审核不通过' },
  { id: 5, label: '审核通过/生产中' },
  { id: 6, label: '生产完成/供应商发货' },
  { id: 7, label: '订单签收/订单完成' },
  { id: 11, label: '生产直接发到客户' },
  { id: 12, label: '已到仓/待发货' },
  { id: 13, label: '质检完成/发货中' },
  { id: 14, label: '订单完成/售后中' },
  { id: 15, label: '售后完成/售后生产中' },
  { id: 16, label: '售后完成/已发货' }
])
const handleSizeChange = (val) => {
  state.pageSizeObj.pageSize = val
  getData()
}
const handleCurChange = (val) => {
  state.pageSizeObj.curPage = val
  getData()
}
const getData = () => {
  const sort = fieldType.value ? `${fieldType.value} ${lastSort.value}` : ''
  const arrAll = title1Val.value.concat(title2Val.value)
  const result = arrAll.filter(item => item !== 0 && item !== 1)
  const params = {
    page: state.pageSizeObj.curPage,
    pageNum: state.pageSizeObj.pageSize,
    search: state.formData.title,
    username: state.formData.username,
    phone: state.formData.phone,
    email: state.formData.email,
    start_time: state.formData.dateRange[0] || '',
    end_time: state.formData.dateRange[1] || '',
    sort: sort,
    current_step: title1Val.value.includes(0) ? '3' : '',
    addresses_id: title1Val.value.includes(1) ? '1' : '',
    order_status: result
  }
  orderIndex(params).then((res) => {
    showStatus.value = false
    if (res.code === 10000) {
      state.tableData = res.data.list
      state.pageSizeObj.total = res.data.pageInfo.count
    }
  })
}
const payTypeObj = ref({
  0: '待付款',
  1: '微信',
  2: '支付宝',
  3: '对公转账',
  4: 'PayPal',
})
// 1代表已支付，2待付款，3审核中，4审核不通过，5生产中，6已发货/部分发货，7已完成，8已取消已关闭，'10生产异常/延期交付11生产直接发到客户12已到仓待发货13质检完成发货中14订单完成售后中15售后完成售后生产中16售后完成已发货
const payStatusObj = ref({
  1: '已支付',
  2: '待付款',
  3: '付款已确认/审核中',
  4: '审核不通过',
  5: '审核通过/生产中',
  6: '生产完成/供应商发货',
  7: '订单签收/订单完成',
  8: '已取消/已关闭',
  10: '生产异常/延期交货',
  11: '生产直接发到客户',
  12: '已到仓/待发货',
  13: '质检完成/发货中',
  14: '订单完成/售后中',
  15: '售后完成/售后生产中',
  16: '售后完成/已发货',
})
const ratingMap = ref({ 1: 'S级', 2: 'A级', 3: 'B级', 4: 'C级', 5: 'D级' });
const sortType = ref('')
const fieldType = ref('')
const lastSort = ref('')
const sortTypeObj = ref({
  asc1: 'asc',
  desc1: 'desc',
  asc2: 'asc',
  desc2: 'desc',
  asc3: 'asc',
  desc3: 'desc',
  asc4: 'asc',
  desc4: 'desc'
})
const iconClick = (filed, type) => {
  sortType.value = type
  fieldType.value = filed
  lastSort.value = sortTypeObj.value[type]
  getData()
}
const showInfos = row => {
  row.isShow = !row.isShow
}
const downLoadFile = async (row, idx) => {
  const params = {
    item_id: row.id,
    number: idx + 1,
    signature: Local.get('signatureLocal') || ''
  }
  try {
    const urls = `${import.meta.env.VITE_API_URL}/admin/order/download`
    const obj = {
      responseType: 'blob',
      headers: {
        'x-access-token': Session.get('token'),
        'X-Access-Appid': 'admin'
      }
    }
    const response = await axios.post(urls, params, obj)
    // 创建下载链接
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', row.new_resources_url)
    document.body.appendChild(link);
    link.click();
    link.remove();
  } catch (error) { /* empty */ }
}
const clickGoEdit = (payload) => {
  if (payload.type === 'order') {
    addDialogRef.value.openDialog('edit', payload.data, payload.type);
  } else if (payload.type === 'item') {
    addDialogRef.value.openDialog('edit', payload.data, payload.type);
  }
}
const showStatusFn = () => {
  if (!showStatus.value) {
    title1Val.value = []
    title2Val.value = []
  }
  showStatus.value = !showStatus.value
}
const title1Fn = () => {
  if (!title1Bool.value) {
    title1Val.value = title1ValArr.value.map(item => item.id)
  } else {
    title1Val.value = []
  }
  nextTick(() => { title1Bool.value = !title1Bool.value })
}
const changeBox1 = (val) => {
  title1Bool.value = val.length == title1ValArr.value.length ? true : false
}
const title2Fn = () => {
  if (!title1Boo2.value) {
    title2Val.value = title2ValArr.value.map(item => item.id)
  } else {
    title2Val.value = []
  }
  nextTick(() => { title1Boo2.value = !title1Boo2.value })
}
const changeBox2 = (val) => {
  title1Boo2.value = val.length == title2ValArr.value.length ? true : false
}
const submitSelect = () => {
  getData()
}
// 处理日期选择变化
const handleDateChange = (dateRange) => {
  if (dateRange && dateRange[0] && dateRange[1]) {
    if (new Date(dateRange[0]) > new Date(dateRange[1])) {
      ElMessage.error('开始时间不能晚于结束时间');
      state.formData.dateRange = [];
      return;
    }
    getData();
  } else {
    ElMessage.error('请选择完整的时间范围');
  }
};
const batchExport = async () => {
  const arrAll = title1Val.value.concat(title2Val.value)
  const result = arrAll.filter(item => item !== 0 && item !== 1)
  const filters = {
    ...(state.formData.title && { search: state.formData.title.trim() }), // 搜索关键词
    ...(state.formData.username && { username: state.formData.username.trim() }), // 客户姓名搜索
    ...(state.formData.phone && { phone: state.formData.phone.trim() }), // 手机号搜索
    ...(state.formData.email && { email: state.formData.email.trim() }), // 邮箱搜索
    ...(state.formData.dateRange && { start_time: state.formData.dateRange[0] }), // 开始时间
    ...(state.formData.dateRange && { end_time: state.formData.dateRange[1] }), // 结束时间
    ...(state.value && { service_id: state.value }), // 下拉选择的服务类型
    ...(result || result === 0 || result === '0') && { order_status: result },
  };
  const params = {
    ...filters,
    signature: Local.get('signatureLocal') || '',
    type: 1,
  }

  try {
    const urls = `${import.meta.env.VITE_API_URL}/admin/order/exports`
    const obj = {
      responseType: 'blob',
      headers: {
        'x-access-token': Session.get('token'),
        'X-Access-Appid': 'admin'
      }
    }
    const response = await axios.post(urls, params, obj)
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    const today = new Date();
    const nowDatess = today.toISOString().split('T')[0]
    const rename = `对账管理_${nowDatess}.csv`
    link.setAttribute('download', rename);
    document.body.appendChild(link);
    link.click();
    link.remove();
  } catch (error) { /* empty */ }
}
const parseSpec = (specStr) => {
  if (!specStr) return {};
  try {
    return JSON.parse(specStr);
  } catch (e) {
    console.warn('Failed to parse specifications:', specStr);
    return {};
  }
};
const handleUpdateItem = (updatedData, type) => {
  if (type === 'order') {
    const index = state.tableData.findIndex(order => order.orderid === updatedData.orderid);
    if (index !== -1) {
      Object.assign(state.tableData[index], updatedData);
      console.log('订单更新成功:', state.tableData[index]);
    }
  } else if (type === 'item') {
    for (const order of state.tableData) {
      if (!Array.isArray(order.items)) continue;
      const itemIndex = order.items.findIndex(item => item.id === updatedData.id);
      if (itemIndex !== -1) {
        order.items[itemIndex] = updatedData;
        break;
      }
    }
  }
};
onMounted(() => {
  getData()
})
</script>

<style scoped lang="scss">
.tips-content {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  position: absolute;
  right: -2px;
  top: -2px;
  background-color: #f00;
}

.flex_cen {
  display: flex;
  align-items: center;
}

.flex_cen_cen {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mt5 {
  margin-top: 5px;
}

.mr5 {
  margin-right: 5px;
}

.mr50 {
  margin-right: 40px;

  .mr20 {
    margin-top: 10px;
  }

  .mr10 {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.mr51 {
  display: flex;
  text-align: center;

  .mr51-div {
    line-height: 18px;
  }
}

.cursors {
  cursor: pointer;
}

.container {
  background: #FFFFFF;
  padding: 15px;

  ::v-deep .search-btns {
    display: flex;
    align-items: center;
    // justify-content: space-between;

    .el-input-group__append {
      padding: 0px 15px;

      .el-icon {
        color: #333333;
        margin-right: 0px;
      }
    }

    .el-button {
      color: #FFFFFF;
    }

    .batch_export {
      margin: 10px 10px;
    }
  }

  .table-class {
    margin-top: 10px;
    background: #FFFFFF;

    .tables {
      width: 100%;
      overflow-x: auto;
    }

    .pagination {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

    tr th {
      border: 1px solid #eee !important;
      border-bottom: 0px !important;
      background: #f5fbff;
    }

    .header-table {}
  }

  .table-class {
    margin-top: 10px;
    background: #FFFFFF;

    .tables {
      width: 100%;
      overflow-x: auto;
    }

    .pagination {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

    tr th {
      border: 1px solid #eee !important;
      border-bottom: 0px !important;
      background: #f5fbff;
    }

    .header-table {
      position: relative;
      z-index: 2;
      background-color: white;
      table-layout: fixed;
    }

    .body-wrapper {
      border-top: none;
    }

    .body-table {
      width: 100%;
      table-layout: fixed;
      border-collapse: collapse;
    }

    .order-table {
      width: 100%;
      border-collapse: collapse;

      th,
      td {
        border: 1px solid #eee;
        padding: 4px;
        text-align: left;
        height: 50px;
      }

      td {
        font-size: 12px;
      }
    }

    .flex {
      display: flex;
      align-items: center;

      .icons {
        margin-left: 5px;
        display: flex;
        flex-direction: column;

        .el-icon {
          height: 10px;
          cursor: pointer;
        }
      }
    }

    .borders {
      border-left: 1px solid #cccccc;
      border-right: 1px solid #cccccc;
      padding: 10px;

      .more_box {
        width: 100%;
        background: #fff;
        margin: 12px 0;
        border-radius: 8px;
        border: 1px solid rgba(0, 194, 130, 0.2);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        padding: 16px;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        font-size: 13px;
        align-items: flex-start;

        .product-img {
          width: 70px;
          height: 70px;
          object-fit: contain;
          margin-bottom: 10px;
          border: 1px solid #eee;
          border-radius: 4px;
        }

        // —————— 左侧：图片 + 基础信息 ——————

        .section-left {
          flex: 1;
          min-width: 180px;
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;



          .basic-info {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 10px;

            .product-name {
              font-weight: 600;
              margin-bottom: 4px;
              max-width: 160px;
              word-break: break-word;

              .indox {
                margin-left: 10px;
              }

              .download-icon {
                color: #409eff;
                font-size: 16px;
                line-height: 18px;
                margin-left: 6px;
              }
            }
          }

          .specs>div {
            margin: 2px 0;
            color: #666;
            font-size: 12px;
          }
        }

        // —————— 中部：服务与价格 ——————
        .section-center {
          flex: 1;
          min-width: 200px;
          display: flex;
          flex-direction: column;
          gap: 10px;

          .service-item {
            display: flex;
            align-items: flex-start;

            label {
              font-weight: 600;
              color: #333;
              min-width: 110px;
              flex-shrink: 0;
            }

            span {
              color: #555;
              flex: 1;
              word-break: break-word;
            }
          }
        }

        // —————— 右侧：基础详情 ——————
        .section-right {
          flex: 1.5;
          min-width: 240px;
          display: flex;
          flex-direction: column;
          gap: 14px;

          .detail-group {
            display: flex;
            flex-direction: column;
            gap: 6px;

            label {
              font-weight: 600;
              color: #333;
              margin-bottom: 2px;
            }

            >div {
              display: flex;
              // flex-wrap: wrap;
              align-items: flex-start;
              gap: 6px 12px;

              label {
                font-weight: normal;
                color: #555;
                min-width: 80px;
                flex-shrink: 0;
              }
            }
          }

          .file-item {

            a {
              color: #409eff;
              text-decoration: none;
            }

            a:hover {
              text-decoration: underline;
            }
          }
        }

        // —————— 新增：成本与物流（section-cb）——————
        .section-cb {
          flex: 1.2;
          min-width: 220px;
          display: flex;
          flex-direction: column;
          gap: 14px;

          // 复用 detail-group 样式（保持一致性）
          .detail-group {
            display: flex;
            flex-direction: column;
            gap: 6px;

            label {
              font-weight: 600;
              color: #333;
              margin-bottom: 2px;
            }

            >div {
              display: flex;
              flex-wrap: wrap;
              align-items: flex-start;
              gap: 6px 12px;

              label {
                font-weight: normal;
                color: #555;
                min-width: 110px; // 物流字段较长，稍宽
                flex-shrink: 0;
              }
            }
          }

          .logistics-group {
            .logistics-img {
              width: 80px;
              height: 80px;
              margin-top: 6px;
              border-radius: 4px;
              object-fit: cover;
            }
          }
        }

        // —————— 操作区 ——————
        .action-section {
          align-self: flex-start;
          margin-left: auto;
          padding-top: 20px;
          flex-shrink: 0;
        }
      }
    }
  }
}

.wid140 {
  width: 140px;
  padding: 5px 10px;
}

.orderidcilick {
  color: #1890ff;
  cursor: pointer;
  font-family: monospace;
  font-size: 14px;
  padding: 2px 4px;
  border-radius: 4px;
  user-select: none;
}

.orderidcilick:hover {
  background-color: #f0f0f0;
  text-decoration: underline;
}

.wid80 {
  width: 80px;
  padding: 5px 10px;
}

.wid100 {
  width: 100px;
  padding: 5px 10px;
}

.img2 {
  width: 80px;
  height: 40px;
  object-fit: contain;
}

.wid101 {
  width: 140px;
}

.bgnum {
  width: fit-content;
  line-height: 20px;
  margin-right: 10px;
  background: #00c282;
  color: #fff;
  font-style: normal;
  border-radius: 3px;
  font-size: 12px;
  margin: 5px 0 0 0;
  padding: 0 5px;
}

.flex_cen {
  display: flex;
  align-items: center;
}

.icon-name {
  width: 140px;
  height: 40px;
  background: #f4f4f4;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;

  .ml10 {
    margin-left: 10px;
  }
}

.relate {
  position: relative;
}

.satus-class {
  position: absolute;
  z-index: 9;
  left: 0px;
  top: 40px;
  background: #fff;
  border-radius: 4px;
  padding: 10px 15px 15px;
  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.05);
  border: 1px solid #ddd;
  width: 370px;

  .title1,
  .title2 {
    width: 100%;
    line-height: 30px;
    background: #eee;
    margin: 10px 0 6px;
    text-indent: 13px;
    border-left: 4px solid #00c282;
    cursor: pointer;
  }
}

.flex_cen_end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.no-data {
  text-align: center;
}
</style>